<template>
  <el-dialog
    :title="isAdd ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      label-width="120px"
    >
      <el-form-item label="工具名称" prop="toolName">
        <el-input v-model="dataForm.toolName" placeholder="名称"></el-input>
      </el-form-item>
      <el-form-item label="链接地址" prop="toolUrl">
        <el-input v-model="dataForm.toolUrl" placeholder="链接地址"></el-input>
      </el-form-item>
      <el-form-item label="是否导航栏显示" prop="isShow">
        <el-select v-model="dataForm.isShow" placeholder="请选择">
          <el-option label="否" :value="0"></el-option>
          <el-option label="是" :value="1"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" v-if="isAdd" @click="add">确定</el-button>
      <el-button type="primary" v-if="!isAdd" @click="update">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addTool, updateTool } from "@/api/knowlegeBase";
import { mapState } from "vuex";
export default {
  data() {
    return {
      visible: false,
      isAdd: true,
      dataForm: {
        id: "",
        toolName: "",
        toolUrl: "",
        waiterId: "",
        isShow: 0
      },
      dataRule: {
        toolName: [
          { required: true, message: "工具名称不能为空", trigger: "blur" },
        ],
        toolUrl: [
          { required: true, message: "链接地址不能为空", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    ...mapState(["idStore"]),
  },
  methods: {
    init(type, data) {
      if (type == 1) {
        this.isAdd = false;
      } else {
        this.isAdd = true;
      }
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (!this.isAdd) {
          const { id, toolName, toolUrl,isShow } = data;
          this.dataForm.id = id;
          this.dataForm.toolName = toolName;
          this.dataForm.toolUrl = toolUrl;
          this.dataForm.isShow = isShow;
        }
      });
    },
    // 表单提交
    add() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.dataForm.waiterId = this.idStore.waiterId;
          this.dataForm.id = undefined;
          addTool(this.dataForm)
            .then(() => {
              this.$message.success(`新增成功`);
              this.visible = false;
              this.$emit("refreshDataList");
            })
            .catch(() => {
              this.$message.error(`工具库新增异常`);
            });
        }
      });
    },
    update() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.dataForm.waiterId = this.idStore.waiterId;
          updateTool(this.dataForm)
            .then(() => {
              this.$message.success("更新成功");
              this.visible = false;
              this.$emit("refreshDataList");
            })
            .catch(() => {
              this.$message.error(`工具库更改异常`);
            });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
  ::v-deep .el-select{
     width: 100%;
   }
</style>
